<template>
<div id="index">
  <!-- <div class="left">hello -->
    <!-- 加载服务器（后端）中的资源图片方式：网络路径加载 -->
    <!-- <img :src="imgUrl+'/upload/1.png'" alt="" class="img"> -->
    <!-- 加载本文件中图片 -->
    <!-- 定义全局图片（本文件中图片） -->
    <!-- <img :src="assets.logo" alt=""> -->
  <!-- </div> -->
  <div class="section indexSection">
    <div class="index-address-wrapper1">
      <div class="location">
        <span class="location-text">弓箭坊40号</span>
        <!-- <span class="location-text-down"></span> -->
      </div>
      <div class="index-message-icon" ></div>
      <div class="index-message-icon2" style=" margin-left: 7px;margin-right: 10px;display:block;"></div>
    </div>
    <div class="search-section index-search-show-wrap">
      <div class="search-show index-search-show showMta">
        <span class="search-bar-span">618购物节</span>
      </div>
      <ul class="search-word search-word-box-index">
        <li>酸奶</li>
        <li>牛奶</li>
        <li>啤酒</li>
        <li>玫瑰花</li>
        <li>卫生巾</li>
        <li>方便面</li>
        <li>巧克力</li> 
      </ul>
    </div>
    <div class="floorBox">
      <img :src="imgUrl+'/upload/4aeb0b1835c4cc03.gif'" alt="" class="botimg">
    </div>
  </div>
  <div class="index-zone-wrap">
   <div class="ListsUl">
    <div v-for="li in lists" :key="'lists'+li.id" class="ListsLi">
      <img :src="imgUrl+'/'+li.imgUrl" alt="" class="listsImg">
      <p class="ballTpl3-title">{{li.title}}</p>
    </div>
   </div>
   <div class="ballScrollWrap">
     <div class="ballScrollBar"></div>
   </div>
  </div>
  <div class="floorBox marketing-floor-banner">
    <div class="floor-banner-link-box showMta">
      <img :src="imgUrl+'/upload/8a2ec71a.png'" width="100%" height="220px">
    </div>
  </div>
  <div class="floorBox index-floor-banner">
    <div class="allWhiteBorder"></div>
    <div class="swiper-box">
      <div class="swiper-container swiper-container-horizontal swiper-container-ios">
        <el-carousel trigger="click" height="100.34px" width="100%" indicator-position="none">
          <el-carousel-item v-for="img in imgs" :key="'imgs'+img.id" class="carousel-item">
            <img :src="imgUrl+'/'+img.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
  <div class="floorBox ">
    <div class="allWhiteBorder"></div>
    <div class="index-grid9-box flex flex-align-middle flex-justify-between">
      <img :src="imgUrl+'/upload/564c879e6763674f.png'" width="173.9px" height="129.3px">
      <img :src="imgUrl+'/upload/af227d1b4a9f5dc2.jpg'" width="173.9px" height="129.3px">
    </div>
  </div>
  <div class="floorBox">
    <div class="allWhiteBorder"></div>
    <div class="index-grid8-box flex flex-justify-between">
      <div class="grid8-link4-box flex-vertical flex-align-middle showMta">
        <span class="gird8-title-box">
          <span class="grid6-Tilte">满99减15</span>
          <span class="grid6-subTilte">啤酒50减10</span>
          <img :src="imgUrl+'/upload/19e4e78f02c12572.png'" height="60px" width="60px">
        </span>
      </div>
      <div class="grid8-link4-box flex-vertical flex-align-middle showMta">
        <span class="gird8-title-box">
          <span class="grid6-Tilte">49减12</span>
          <span class="grid6-subTilte">夏季调理</span>
          <img :src="imgUrl+'/upload/8bb3c9023f630faa.png'" height="60px" width="60px">
        </span>
      </div>
       <div class="grid8-link4-box flex-vertical flex-align-middle showMta">
        <span class="gird8-title-box">
          <span class="grid6-Tilte">满89减12</span>
          <span class="grid6-subTilte">会员免运</span>
          <img :src="imgUrl+'/upload/7979f7fcb8b809e5.png'" height="60px" width="60px">
        </span>
      </div>
       <div class="grid8-link4-box flex-vertical flex-align-middle showMta">
        <span class="gird8-title-box">
          <span class="grid6-Tilte">领劵减10</span>
          <span class="grid6-subTilte">火龙果3.9</span>
          <img :src="imgUrl+'/upload/7d271d890395668c.png'" class="ggimg">
        </span>
      </div>
    </div>
  </div>
  <div class="floorBox index-floor-banner">
    <div class="allWhiteBorder"></div>
    <div class="swiper-box">
      <div class="swiper-container swiper-container-horizontal swiper-container-ios">
        <el-carousel trigger="click" height="100.34px" width="100%" indicator-position="none">
          <el-carousel-item v-for="img2 in imgs2" :key="'imgs2'+img2.id" class="carousel-item">
            <img :src="imgUrl+'/'+img2.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
  <div class="floorBox">
    <p class="floorTitleMoreBox">
      <span class="moreBox-title">附近的店铺</span>
    </p>
    <!-- v-infinite-scroll="loadMore" -->
    <div class="scroll-box scrollLoad-box">
       <div class="search-product-item-wrap showMta" @click="enter()">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/5acc2509N7c45bbc8.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">{{shop.title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N61b11f13.png'" style="width:18px;height:16px">
              </div>
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.9</span>
              <div class="store-monthsale oneline-overflow-ellipsis">月售1千+</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">50分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">1.2km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领25元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领8元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领20元券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(76, 156, 255), rgb(36, 134, 255));">
                    <span>运费</span>
                  </span>
                  <span class="index-store-fujia-desc">商家会员满59元减4元运费(每月4次)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <!-- <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有1家</span>
              </div>
              <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/5d8fff7dcf22136d.png'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">沃尔玛-秦淮店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N8630ddda.png'" style="width:18px;height:16px">
              </div>
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.9</span>
              <div class="store-monthsale oneline-overflow-ellipsis">月售6千+</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">57分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">1.4km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5.5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元运费券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(255, 125, 125), rgb(255, 81, 56));">
                    <span>返劵</span>
                  </span>
                  <span class="index-store-fujia-desc">实付满69元订单完成后返20元优惠券(每单返)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有1家</span>
              </div>
              <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/413a647fbdc2c7bd.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">永辉超市-茂业天地店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N8630ddda.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.8</span>
              <div class="store-monthsale oneline-overflow-ellipsis">月售3千+</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">57分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">679km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5.5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元运费券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(255, 125, 125), rgb(255, 81, 56));">
                    <span>返劵</span>
                  </span>
                  <span class="index-store-fujia-desc">实付满69元订单完成后返20元优惠券(每单返)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <!-- <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有1家</span>
              </div>
              <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/59ea9b8fNc3049899.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">阳光菜园八宝前街尚书巷菜场</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N61b11f13.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.8</span>
              <div class="store-monthsale oneline-overflow-ellipsis">688</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">52分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">3.0km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领20元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领8元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领12元券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(76, 156, 255), rgb(36, 134, 255));">
                    <span>运费</span>
                  </span>
                  <span class="index-store-fujia-desc">商家会员满59元减4元运费(每月4次)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有2家店</span>
              </div>
              <!-- <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
       <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/5b04bd08N9bce6c66.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">益丰-南京集庆路店</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N61b11f13.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.8</span>
              <div class="store-monthsale oneline-overflow-ellipsis">35</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">34分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">999m</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领20元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领8元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领12元券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));">
                    <span>满减</span>
                  </span>
                  <span class="index-store-fujia-desc">美林&达克宁满35减5</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有5家店</span>
              </div>
              <!-- <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/5b01a3cfN24ed6d56.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">南京苏果升州路生活超市</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N8630ddda.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.9</span>
              <div class="store-monthsale oneline-overflow-ellipsis">月售6千+</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">57分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">1.4km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5.5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元运费券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(255, 125, 125), rgb(255, 81, 56));">
                    <span>返劵</span>
                  </span>
                  <span class="index-store-fujia-desc">实付满69元订单完成后返20元优惠券(每单返)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有1家</span>
              </div>
              <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/413a647fbdc2c7bd.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">永辉超市-茂业天地店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N8630ddda.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.8</span>
              <div class="store-monthsale oneline-overflow-ellipsis">月售3千+</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">57分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">679km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5.5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5元运费券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元运费券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(255, 125, 125), rgb(255, 81, 56));">
                    <span>返劵</span>
                  </span>
                  <span class="index-store-fujia-desc">实付满69元订单完成后返20元优惠券(每单返)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <!-- <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有1家</span>
              </div>
              <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/5acc2509N7c45bbc8.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">鲜家-新街口店（苏红菜场）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N61b11f13.png'" style="width:18px;height:16px">
              </div>
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.9</span>
              <div class="store-monthsale oneline-overflow-ellipsis">月售1千+</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">50分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">1.2km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领25元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领5元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领8元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领20元券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(76, 156, 255), rgb(36, 134, 255));">
                    <span>运费</span>
                  </span>
                  <span class="index-store-fujia-desc">商家会员满59元减4元运费(每月4次)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <!-- <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有1家</span>
              </div>
              <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/59ea9b8fNc3049899.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">阳光菜园八宝前街尚书巷菜场</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N61b11f13.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.8</span>
              <div class="store-monthsale oneline-overflow-ellipsis">688</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">52分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">3.0km</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领20元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领8元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领12元券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(76, 156, 255), rgb(36, 134, 255));">
                    <span>运费</span>
                  </span>
                  <span class="index-store-fujia-desc">商家会员满59元减4元运费(每月4次)</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有2家店</span>
              </div>
              <!-- <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
       <div class="search-product-item-wrap showMta">
        <div class="store-item-container ">
          <div style="position: relative; height: 66px; margin-right: 10px;">
            <img :src="imgUrl+'/upload/5b04bd08N9bce6c66.jpg'" style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); background: none;">
          </div>
          <div class="store-item-right-wrap">
            <div class="store-name-box">
              <div class="store-title">益丰-南京集庆路店</div>
              <!-- <div class="honor-list">
                <img :src="imgUrl+'/upload/5bee3729N61b11f13.png'" style="width:18px;height:16px">
              </div> -->
            </div>
            <div class="star-section-wrap">
              <div class="star-container">
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
                <div class="star-wrap">
                  <img :src="imgUrl+'/upload/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png'" style="position: absolute; width: 50px; height: 10px; top: 0px; left: 0px;">
                </div>
              </div>
              <span class="star-label">4.8</span>
              <div class="store-monthsale oneline-overflow-ellipsis">35</div>
              <div class="delivery-distance">
                <span class="delivery-first oneline-overflow-ellipsis">34分钟</span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis">999m</span>
              </div>
            </div>
            <div class="index-store-freight-box">
              <div class="freight-wrap">
                <span class="delivery-first oneline-overflow-ellipsis">起送¥0 </span>
                <span class="distance-time-sep-line"></span>
                <span class="delivery-first oneline-overflow-ellipsis"> 基础运费¥4</span>
              </div>
              <span class="promotion-tags promotion-tags-empty" style="border-color: rgb(76, 156, 255); color: rgb(76, 156, 255);">
                <span style="color: rgb(76, 156, 255);">达达专送</span>
              </span>
            </div>
            <ul class="index-store-list-fujia-bottom">
              <div class="store-gian-newCoupons-box">
                <div class="arrow-wrap">
                  <span style="width: 4px; height: 4px; transform: rotate(45deg); border-right: 1px solid rgb(102, 102, 102); border-bottom: 1px solid rgb(102, 102, 102); display: inline-block; position: absolute; left: 50%; top: 40%;"></span>
                </div>
                <div class="store-gain-coupons-box ">
                  <div class="store-gain-show-box">
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领20元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领8元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领4元券</span>
                    <span class="store-gian-coupons-flag" style="color: rgb(255, 87, 87); border-color: rgb(255, 188, 188); background-color: rgb(255, 255, 255);">领12元券</span>
                  </div>
                </div>
                <li class="index-store-fujia-item ">
                  <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));">
                    <span>满减</span>
                  </span>
                  <span class="index-store-fujia-desc">美林&达克宁满35减5</span>
                </li>
              </div>
            </ul>
            <div class="nearby-store-box nearby-store-box-slidedown">
              <div class="nearby-store-title">
                <span class="nearby-store-title-icon"></span>
                <span>附近还有5家店</span>
              </div>
              <!-- <ul class="nearby-store-list ">
                <li class="nearby-store-item showMta">
                  <div class="nearby-store-link">
                    <span class="nearby-store-link-name">沃尔玛-虹悦城店</span>
                    <span class="nearby-store-link-sendtime">
                      <em>56分钟</em>
                      <em class="distance-time-sep-line"></em>
                      <em>2.7km</em>
                    </span>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div style="font-size: 16px;line-height: 15px;color: #666;text-align: center;">数据加载中，请稍后</div>
    </div>
     
  </div>
 
  <div class="navigation footer-nav ipx-pad">
    <span class="navigation-item">
      <i class="iconfont1 icon-home"></i>
      <span class="navigation-item-label nav-item-label1">首页</span>
    </span>
    <span class="navigation-item" @click="find()">
      <i class="iconfont2 icon-home"></i>
      <span class="navigation-item-label">发现</span>
    </span>
    <span class="navigation-item" @click="buy()">
      <i class="iconfont3 icon-home"></i>
      <span class="navigation-item-label">购物车</span>
    </span>
    <span class="navigation-item" @click="list()">
      <i class="iconfont4 icon-home"></i>
      <span class="navigation-item-label">订单</span>
    </span>
    <span class="navigation-item" @click="mine()">
      <i class="iconfont5 icon-home"></i>
      <span class="navigation-item-label">我的</span>
    </span>
  </div>

</div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 400;
  font-style: normal;
}
#index {
  .indexSection {
    width: 100%;
    .index-address-wrapper1 {
      background: url("http://127.0.0.1:8088/upload/c5daeffc3e809972.jpg") 100%;
      opacity: 1;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 50;
      height: 44px;
      line-height: 44px;
      background-size: cover;
      display: flex;
      .location {
        max-width: 40%;
        height: 22px;
        width: 200px;
        margin-right: 45px;
        margin-top: 10px;
        vertical-align: top;
        border-radius: 23px;
        line-height: 44px;
        font-size: 16px;
        color: #fff;
        text-align: left;
        .location-text {
          display: inline-block;
          max-width: 90px;
          padding-left: 20px;
          margin-left: 13px;
          margin-right: 2px;
          vertical-align: top;
          background: url("http://127.0.0.1:8088/upload/location.png") no-repeat;
          background-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 22px;
        }
        .location-text-down {
          display: inline-block;
          width: 10px;
          height: 22px;
          background: url("http://127.0.0.1:8088/upload/down.png") no-repeat;
          background-size: 8px;
        }
      }
      .index-message-icon {
        right: 40px;
        top: 0;
        margin-left: 145px;
        width: 10px;
        height: 44px;
        padding: 0 9px;
        background: url("http://127.0.0.1:8088/upload/xxi.png") no-repeat 50%;
        background-size: 20px;
      }
      .index-message-icon2 {
        right: 40px;
        top: 0;
        margin-left: 110px;
        width: 10px;
        height: 44px;
        padding: 0 9px;
        background: url("http://127.0.0.1:8088/upload/find.png") no-repeat 50%;
        background-size: 23px;
      }
    }
    .search-section {
      width: 100%;
      background: url("http://127.0.0.1:8088/upload/ce6b8ccbf4caac32.jpg") 100%;
      background-size: cover;
      margin: 0;
      overflow: hidden;
      opacity: 1;
      .search-show {
        border-radius: 68px;
      }
      .index-search-show {
        padding: 0;
        margin: 49px 10px 10px;
        background: #fff;
        opacity: 0.3;
        .search-bar-span {
          height: 34px;
          width: 100%;
          font-size: 14px;
          line-height: 34px;
          border-radius: 17px;
          display: inline-block;
          box-sizing: border-box;
          text-align: center;
          color: #999;
        }
        .search-bar-text:before {
          content: "";
          background-image: url("http://127.0.0.1:8088/upload/search_bar_sprites.57c20493.png");
          background-repeat: no-repeat;
          background-size: 44px auto;
        }
      }
      .search-word {
        width: 95%;
        margin: 0 auto;
        overflow: hidden;
        height: 27px;
        line-height: 27px;
        text-align: center;
        display: flex;
        list-style-type: none;
        justify-content: space-around;
      }
      .search-word li {
        color: #fff;
        font-size: 12px;
        margin-top: -5px;
      }
    }
    .floorBox {
      .botimg {
        height: 115px;
        width: 100%;
        margin-top: -4px;
      }
    }
  }
  .index-zone-wrap {
    background-image: url("http://127.0.0.1:8088/upload/81f39c7b72a65780_wps图片.jpg");
    width: 100%;
    overflow-x: auto;
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 0;
    padding-bottom: 15px;
    margin-top: -5px;
    .ListsUl {
      width: 600px;
      display: flex;
      flex-wrap: wrap;
      .ListsLi {
        text-align: center;
        font-size: 12px;
        width: 75px;
        margin-top: 15px;
        .listsImg {
          width: 40px;
        }
      }
    }
    .ballScrollWrap {
      width: 25px;
      height: 2px;
      margin: 6px auto;
      border-radius: 2px;
      background-color: #f8f8f8;
      .ballScrollBar {
        width: 15.5px;
        height: 2px;
        margin: 0 auto;
        margin: 12px;
        background: green;
      }
    }
  }
  .marketing-floor-banner {
    margin: 10px;
    .floor-banner-link-box {
      display: block;
      font-size: 0;
    }
  }
  .index-floor-banner {
    padding: 0 10px;
    .allWhiteBorder {
      height: 10px;
      background: #fff;
    }
    .swiper-container {
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
      .carousel-item img {
        width: 355px;
        height: 100.34px;
      }
    }
  }
  .floorBox {
    .allWhiteBorder {
      height: 10px;
      background: #fff;
    }
    .index-grid9-box {
      padding: 10px 10px 0;
      background: #fff;
    }
    .flex {
      display: flex;
    }
    .flex-justify-between {
      justify-content: space-between;
    }
    .flex-align-middle {
      align-items: center;
    }
  }
  .floorBox {
    .allWhiteBorder {
      height: 10px;
      background: #fff;
    }
    .index-grid8-box {
      padding: 0 10px;
      background: #fff;
      display: flex;
      .grid8-link4-box {
        align-items: center;
        width: 24%;
        background: #fbfbfb;
        .gird8-title-box {
          text-align: center;
          display: inline-block;
          .grid6-Tilte {
            color: rgb(51, 51, 51);
            line-height: 32px;
            font-weight: 700;
            font-size: 15px;
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .grid6-subTilte {
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 20px;
            line-height: 12px;
            font-weight: 400;
            font-size: 12px;
            color: rgb(255, 87, 87);
          }
          .ggimg {
            width: 60px;
            height: 60px;
            margin-left: 10px;
          }
        }
      }
      .flex-vertical {
        height: 100%;
        flex-direction: column;
      }
    }
  }
  .floorBox {
    .floorTitleMoreBox {
      padding-top: 30px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 20px;
      position: relative;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #333;
      background-color: #fff;
      .moreBox-title {
        float: left;
        font-weight: 700;
        font-size: 20px;
      }
    }
    .scroll-box {
      padding-bottom: 50px;
      overflow-x: auto;
      .search-product-item-wrap {
        position: relative;
        background-color: #fff;
        border-bottom: 1px solid #e7e9e4;
        padding: 20px 10px 15px;
        min-height: 70px;
        .store-item-container {
          position: relative;
          display: flex;
          flex: 1 1;
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
          align-items: flex-start;
          flex-wrap: wrap;
          .store-item-right-wrap {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .store-name-box {
              display: flex;
              flex-direction: row;
              height: 20px;
              line-height: 20px;
              .store-title {
                font-size: 16px;
                color: #333;
                font-weight: 700;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 0;
              }
            }
            .star-section-wrap {
              display: flex;
              flex: 1 1;
              flex-grow: 1;
              flex-shrink: 1;
              flex-basis: 0%;
              flex-direction: row;
              align-items: center;
              height: 16px;
              margin-top: 5px;
              .star-container {
                display: flex;
                width: 50px;
                height: 10px;
                flex-direction: row;
                background-color: transparent;
                justify-content: center;
                align-items: flex-start;
                .star-wrap {
                  width: 10px;
                  height: 10px;
                  overflow: hidden;
                  background-color: transparent;
                  position: relative;
                  top: 0;
                }
              }
              .star-label {
                display: inline-block;
                padding-left: 3px;
                line-height: 10px;
                font-size: 10px;
                color: #ffa14e;
                vertical-align: 1px;
              }
              .store-monthsale {
                color: #666;
                font-size: 11px;
                line-height: 14px;
                margin-left: 5px;
              }
              .oneline-overflow-ellipsis {
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
              }
              .delivery-distance {
                display: flex;
                flex: 1 1;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
                .delivery-first {
                  font-size: 11px;
                  color: #666;
                }
                .oneline-overflow-ellipsis {
                  display: block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  word-break: break-all;
                }
                .distance-time-sep-line {
                  width: 1px;
                  height: 8px;
                  background-color: #f5f5f5;
                  margin: 0 5px;
                  display: inline-block;
                }
                .delivery-first {
                  font-size: 11px;
                  color: #666;
                }
                .oneline-overflow-ellipsis {
                  display: block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  word-break: break-all;
                }
              }
            }
            .index-store-freight-box {
              display: flex;
              flex: 1 1;
              flex-grow: 1;
              flex-shrink: 1;
              flex-basis: 0%;
              height: 16px;
              line-height: 16px;
              margin-top: 5px;
              .freight-wrap {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                .delivery-first {
                  font-size: 11px;
                  color: #666;
                }
                .oneline-overflow-ellipsis {
                  display: block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  word-break: break-all;
                }
                .distance-time-sep-line {
                  width: 1px;
                  height: 8px;
                  background-color: #f5f5f5;
                  margin: 0 5px;
                  display: inline-block;
                }
              }
              .promotion-tags-empty {
                line-height: 14px;
                color: #ccc;
                background: #fff;
                box-sizing: border-box;
                border: 1px solid #ccc;
              }
              .promotion-tags {
                display: inline-block;
                padding: 0 3px;
                font-size: 10px;
                line-height: 14px;
                border-radius: 4px 1px;
                z-index: 1;
              }
            }
            .index-store-list-fujia-bottom {
              position: relative;
              list-style: none;
              .store-gian-newCoupons-box {
                position: relative;
                .arrow-wrap {
                  position: absolute;
                  right: -12px;
                  top: -8px;
                  width: 40px;
                  height: 40px;
                  z-index: 10;
                }
                .store-gain-coupons-box {
                  margin-top: 5px;
                  margin-bottom: 5px;
                  font-size: 10px;
                  height: 24px;
                  padding-right: 20px;
                  overflow: hidden;
                  .store-gain-show-box {
                    font-size: 10px;
                    .store-gian-coupons-flag {
                      display: inline-block;
                      padding: 1px 2px;
                      margin-top: 5px;
                      margin-right: 5px;
                      border-radius: 4px 1px 4px 1px;
                      border: 1px solid #ff5757;
                      font-size: 10px;
                      color: #ff5757;
                    }
                  }
                }
                .index-store-fujia-item {
                  margin-top: 5px;
                  font-size: 11px;
                  position: relative;
                  color: #666;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  line-height: 14px;
                  .promotion-tags {
                    display: inline-block;
                    padding: 0 3px;
                    font-size: 10px;
                    height: 14px;
                    line-height: 14px;
                    border-radius: 4px 1px;
                    color: #fff;
                    z-index: 1;
                    box-sizing: border-box;
                  }
                  .promotion-tags-full {
                    margin-right: 3px;
                  }
                  .index-store-fujia-desc {
                    display: inline-block;
                    width: 80%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 11px;
                    vertical-align: top;
                  }
                }
              }
            }
            .nearby-store-box {
              height: auto;
              position: relative;
              margin-top: 20px;
              .nearby-store-title {
                font-size: 11px;
                color: #666;
                line-height: 14px;
                position: relative;
                .nearby-store-title-icon {
                  float: left;
                  width: 14px;
                  height: 14px;
                  margin-right: 4px;
                  background: url("http://127.0.0.1:8088/upload/store-icon.png")
                    50% no-repeat;
                  background-size: 11px auto;
                }
              }
              .nearby-store-list {
                overflow: hidden;
                list-style: none;
                .nearby-store-item:first-child {
                  border-top-width: 0;
                }
                .nearby-store-item {
                  font-size: 14px;
                  color: #333;
                  border-top: 1px solid #f5f5f5;
                  .nearby-store-link {
                    overflow: hidden;
                    flex: 1 1;
                    flex-grow: 1;
                    flex-shrink: 1;
                    flex-basis: 0%;
                    padding: 10px 0;
                    color: #333;
                    display: flex;
                    height: 17px;
                    line-height: 17px;
                    .nearby-store-link-name {
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      font-weight: 400;
                      overflow: hidden;
                      flex: 1 1;
                      flex-grow: 1;
                      flex-shrink: 1;
                      flex-basis: 0%;
                      color: #333;
                    }
                    .nearby-store-link-sendtime em {
                      font-size: 11px;
                    }
                    .nearby-store-link-sendtime {
                      color: #666;
                      font-size: 0;
                      text-align: right;
                      padding-left: 2px;
                      .distance-time-sep-line {
                        width: 1px;
                        height: 8px;
                        background-color: #f5f5f5;
                        margin: 0 5px;
                        display: inline-block;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    z-index: 1001;
    align-items: center;
    display: flex;
  }
  .navigation {
    align-items: center;
    background-image: linear-gradient(
      180deg,
      #e8e8e8,
      #e8e8e8 50%,
      transparent 0
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #fff;
    height: 50px;
    .navigation-item {
      display: inline-block;
      width: 75px;
      position: relative;
      color: #555;
      flex: 1 1;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0%;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      text-align: center;
      // color: #39ac69;
      display: flex;
      .iconfont1 {
        background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
          no-repeat;
        height: 30px;
        background-size: 24px auto;
        background-position: center -50px;
      }
      .iconfont2 {
        background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
          no-repeat;
        height: 30px;
        background-size: 24px auto;
        background-position: center -601px;
      }
      .iconfont3 {
        background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
          no-repeat;
        height: 30px;
        background-size: 24px auto;
        background-position: center -100px;
      }
      .iconfont4 {
        background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
          no-repeat;
        height: 30px;
        background-size: 24px auto;
        background-position: center -200px;
      }
      .iconfont5 {
        background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
          no-repeat;
        height: 30px;
        background-size: 24px auto;
        background-position: center -300px;
      }
      .navigation-item-label {
        display: block;
        height: 20px;
        line-height: 17px;
      }
      .nav-item-label1 {
        color: #39ac69;
      }
    }
  }
}
</style>



<script>
export default {
  data() {
    return {
      lists: [],
      imgs: [],
      imgs2: [],
      shop: []
      // data: [],
      // busy: false
    };
  },
  mounted() {
    // 监听页面滚动条
    window.addEventListener("scroll", e => {
      const y = window.scrollY;
      let alp = 1;
      if (y > 0) {
        alp = y / 200;
        document.querySelector(
          ".index-address-wrapper1"
        ).style.opacity = `${alp}`;
        document.querySelector(".index-message-icon2").style.display = "block";
        document.querySelector(".search-section").style.opacity = `${1 - alp}`;
      } else {
        document.querySelector(".index-address-wrapper1").style.opacity = "1";
        document.querySelector(".index-message-icon2").style.display = "none";
      }
    });
  },
  created() {
    this.getLists();
    this.getShop();
    this.getImgs();
    this.getImgs2();
    // this.test();
  },
  methods: {
    // loadMore: function() {
    //   // this.busy = true;
    //   setTimeout(() => {
    //     for (var i = 0, j = 10; i < j; i++) {
    //       this.data.push({ name: count++ });
    //     }
    //     // this.busy = false;
    //   }, 1000);
    // },
    enter(shop_id) {
      this.$router.push({
        name: "XianjiaStore",
        params: { shop_id },  
      });
      const shop=this.shop
      console.log(this)
    },
    find() {
      this.$router.push({
        name: "find"
      });
    },
    buy() {
      this.$router.push({
        name: "buy"
      });
    },
    list() {
      this.$router.push({
        name: "list"
      });
    },
    mine() {
      this.$router.push({
        name: "mine"
      });
    },
    async getShop() {
      var { data, data: { result } } = await this.axios({
        methods: "shop",
        url: "/shop"
      });
      this.shop = result;
    },
    async getLists() {
      var { data, data: { result } } = await this.axios({
        methods: "get",
        url: "/lists"
      });
      this.lists = result;
    },
    async getImgs() {
      var { data, data: { result } } = await this.axios({
        methods: "get",
        url: "/imgs"
      });
      this.imgs = result;
    },
    async getImgs2() {
      var { data, data: { result } } = await this.axios({
        methods: "get",
        url: "/imgs2"
      });
      this.imgs2 = result;
    }

    // async test() {
    //   var {data} = await this.axios({
    //     methods: "get",
    //     url: "/test"
    //   });
    //   console.log(data);
    // }
  }
};
</script>





